<template>
  <div class="detail-container" v-if="list">
    <div class="header" v-for="value in list" :key="value.id">
      <div class="header-main">
        <div class="header-left">
          <img :src="value.verticalPic" alt />
        </div>
        <div class="header-right">
          <h3>{{value.nameNoHtml}}</h3>
          <p>{{value.price_str}}</p>
        </div>
      </div>
      <div class="header-bottom">
        <p>本商品为预售商品，正式开票后将在第一时间为您配送</p>
      </div>
      <div class="header-footer">
        <p>
          <span>服务</span>不支持退 · 不支持选座 · 快递票 · 纸质发票
        </p>
      </div>
    </div>
    <div class="main" v-for="(value,index) in list" :key="value+index">
      <div class="date">
        <h2>{{value.showtime}}</h2>
        <p>请提前半小时入场</p>
      </div>
      <div class="adress">
        <h2>{{value.venue}}</h2>
        <p>公交、出租都可直达</p>
      </div>
      <div data-v-ed1dae8a class="notice-container">
        <div data-v-ed1dae8a class="tab-header">
          <div data-v-ed1dae8a class="tab-item">购票须知</div>
          <div data-v-ed1dae8a class="tab-item tab-item-unselected">活动须知</div>
          <div data-v-ed1dae8a class="close-button">
            <i data-v-ed1dae8a class="iconfont iconfucengguanbi_ close-icon"></i>
          </div>
        </div>
        <div data-v-ed1dae8a class="tab-content">
          <div data-v-26981003 data-v-ed1dae8a class="info-item">
            <div data-v-26981003 class="item-title">
              <i data-v-26981003 class="iconfont icon icondagou_"></i>
              <div data-v-26981003 class="text">我最多可以购买几张？</div>
            </div>
            <div data-v-26981003 class="item-text">每笔订单最多购买20张</div>
          </div>
          <div data-v-26981003 data-v-ed1dae8a class="info-item">
            <div data-v-26981003 class="item-title">
              <i data-v-26981003 class="iconfont icon icondagou_"></i>
              <div data-v-26981003 class="text">需要实名购买吗？</div>
            </div>
            <div data-v-26981003 class="item-text">无需实名制购票</div>
          </div>
          <div data-v-26981003 data-v-ed1dae8a class="info-item">
            <div data-v-26981003 class="item-title">
              <i data-v-26981003 class="iconfont icon icondagou_"></i>
              <div data-v-26981003 class="text">婴幼儿及儿童需要买票吗？</div>
            </div>
            <div data-v-26981003 class="item-text">儿童一律凭成人票入场</div>
          </div>
          <div data-v-26981003 data-v-ed1dae8a class="info-item">
            <div data-v-26981003 class="item-title">
              <i data-v-26981003 class="iconfont icon icondagou_"></i>
              <div data-v-26981003 class="text">我的座位怎么安排？/现场入座要求是什么？</div>
            </div>
            <div data-v-26981003 class="item-text">现场无座位，请听从现场安排，有序进场</div>
          </div>
          <div data-v-26981003 data-v-ed1dae8a class="info-item">
            <div data-v-26981003 class="item-title">
              <i data-v-26981003 class="iconfont icon icondagou_"></i>
              <div data-v-26981003 class="text">我要怎么开发票？</div>
            </div>
            <div data-v-26981003 class="item-text">如需发票，请您在演出开始前通过订单页补开，发票将在演出结束后1个月左右，统一由开具方提供</div>
          </div>
          <div data-v-26981003 data-v-ed1dae8a class="info-item">
            <div data-v-26981003 class="item-title">
              <i data-v-26981003 class="iconfont icon icondagou_"></i>
              <div data-v-26981003 class="text">我购买后是否可以退换票？</div>
            </div>
            <div
              data-v-26981003
              class="item-text"
            >票品为有价证券，非普通商品，其背后承载的文化服务具有时效性、稀缺性等特征，不支持退换。如您购票后无法正常观看，还请自行处理</div>
          </div>
          <div data-v-26981003 data-v-ed1dae8a class="info-item">
            <div data-v-26981003 class="item-title">
              <i data-v-26981003 class="iconfont icon icondagou_"></i>
              <div data-v-26981003 class="text">活动时长</div>
            </div>
            <div data-v-26981003 class="item-text">活动时长逢周一闭馆（节假日除外），周二-周日10:00-22:00（21:00停止验票）</div>
          </div>
          <div data-v-26981003 data-v-ed1dae8a class="info-item">
            <div data-v-26981003 class="item-title">
              <i data-v-26981003 class="iconfont icon icondagou_"></i>
              <div data-v-26981003 class="text">异常订购说明</div>
            </div>
            <div data-v-26981003 class="item-text">
              对于异常订购行为，大麦网有权在订单成立或者生效之后取消相应订单。异常订购行为包括但不限于以下情形：
              <br />（1）通过同一ID订购超出限购张数的订单；
              <br />（2）经合理判断认为非真实消费者的下单行为，包括但不限于通过批量相同或虚构的支付账号、收货地址（包括下单时填写及最终实际收货地址）、收件人、电话号码订购超出限购张数的订单
            </div>
          </div>
          <div data-v-ed1dae8a class="bottom-padding"></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <router-link tag="div" to="/Home" class="bottom-1">
        <span class="yo-ico">&#xe608;</span>
        <p>大麦首页</p>
      </router-link>
      <div class="bottom-2" @click="watchclcik">
        <span class="yo-ico" :class="{active:isactive}">&#xe600;</span>
        <p>想看</p>
      </div>
      <div class="bottom-3">
        <span class="yo-ico">&#xe649;</span>
        <router-link  tag="p" to="/myorder">我的订单</router-link>
      </div>
      <div class="bottom-4">
        <p is-link @click="clickbuy">立即预定</p>
      </div>
     <van-sku
       position="bottom"
    :style="{ width: '100%' }"
  v-model="show"
  :sku="sku"
  :goods="goods"
  :goods-id="goodsId"
  :quota="quota"
  :hide-stock="sku.hide_stock"
  @buy-clicked="onBuyClicked"
  @add-cart="onAddCartClicked"
  @stepper-change="addcount"
  @sku-selected="changesku"
  >
  <template slot="sku-messages">
    <div class="total">￥{{totalprice}}</div>
  </template>
  </van-sku>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Popup,Sku,Toast } from 'vant';
Vue.use(Sku).use(Popup).use(Toast)
export default {
  data() {
    return {
      list: [],
      price:0,
      num:0,
      isactive:false,
      show:false,
      quota:5,
      goodsId:"100",
      goods: {
  // 商品标题
  title: '测试商品',
  // 默认商品 sku 缩略图
 picture: 'http://img.alicdn.com/tfs/TB1fbVFfu3tHKVjSZSgXXX4QFXa-230-104.png'
},
initialSku:{
  // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
  // 值：skuValueId（规格值 id）
  s1: '30349',
  s2: '1215',
  // 初始选中数量
  selectedNum: 3

},
sku: {
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: '票档', // skuKeyName：规格类目名称
      v: [
        {
          id: '30349', // skuValueId：规格值 id
          name: '内场', // skuValueName：规格值名称
         
        },
        {
          id: '1215',
          name: '看台',
        }
      ],
      k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
    }
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 1215, // skuId，下单时后端需要
      price: 0, // 价格（单位分）
      s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
      stock_num: 110 // 当前 sku 组合对应的库存
    },
     {
      id: 1193, // skuId，下单时后端需要
      price: 0, // 价格（单位分）
      s1: '30349', // 规格类目 k_s 为 s1 的对应规格值 id   
      stock_num: 120 // 当前 sku 组合对应的库存
    }
  ],
  price: '', // 默认价格（单位元）
  stock_num: 227, // 商品总库存
  hide_stock: false // 是否隐藏剩余库存
}

    }
  },
  methods: {
    watchclcik(){    
      if(this.islogin){
        this.isactive=true
        this.$store.commit('addshow', {data:this.list})
  
      }else{
        this.$router.push('/login')
      }
    },
    addcount(value){
    this.num=value  
  
    },
    clickbuy(){
    this.show=true
    },
    onBuyClicked(skuData){
    Toast.success('支付成功')
       console.log(skuData)
        let obj={} 
     obj.count=skuData.selectedNum
     obj.price=skuData.selectedSkuComb.price/100 
     obj.nameNoHtml=this.list[0].nameNoHtml
     obj.imgsrc=this.list[0].verticalPic
     obj.showtime=this.list[0].showtime
     obj.venue=this.list[0].venue
     console.log(obj)
     this.$store.commit('myorder',{
       data:obj
     })
      
    },
    onAddCartClicked(){
      Toast.success('添加购物车成功')
     
      
    },
    changesku({ skuValue, selectedSku, selectedSkuComb }){
   this.price=selectedSkuComb.price/100
    }
  },
  computed: {
    islogin(){
      return  this.$store.state.islogin
    },
    totalprice(){
      return this.price*this.num
    }
    
  },
  mounted() {
    this.list = this.$route.query.list2
    this.sku.list[0].price=this.list[0].price*100
    this.sku.list[1].price=this.list[0].pricehigh*100
    this.sku.price=this.sku.list[0].price/100
    
  }
};
</script>
<style lang="stylus" scoped>
 @import "../styles/icon.styl"
.detail-container {
  width: 100%;
  height: 100%;
  background: white;
  position: relative;

  .header {
    width: 100%;
    height: 4.92rem;
    padding: 0.36rem 0.2rem;

    .header-main {
      display: flex;
      height: 3.2rem;
      flex-direction: row;

      .header-left {
        width: 2.37rem;
        height: 3.2rem;

        img {
          width: 2.37rem;
          height: 3.2rem;
        }
      }

      .header-right {
        padding-left: 0.3rem;

        h3 {
          font-size: 0.32rem;
        }

        p {
          font-size: 0.32rem;
          margin-top: 1.6rem;
          color: #ff2d79;
        }
      }
    }

    .header-bottom {
      width: 100%;
      padding: 0.3rem 0.24rem;
      font-size: 0.24rem;
      color: #999;
    }

    .header-footer {
      padding: 0 0.3rem;
      background: #f8f8f8;
      color: #222;

      p {
        font-size: 0.265rem;

        span {
          color: #ff2d79;
        }
      }
    }
  }

  .main {
    padding: 0.4rem 0.4rem;
    height 100%
    .date {
      height: 1.3rem;
      width: 100%;
      border-bottom: 1px solid #f8f8f8;

      h2 {
        font-size: 0.32rem;
      }

      p {
        font-size: 0.26rem;
        color: #999;
      }
    }

    .adress {
      height: 1.48rem;
      width: 100%;

      h2 {
        font-size: 0.32rem;
      }

      p {
        font-size: 0.26rem;
        color: #999;
      }
    }

    .notice-container{
      height 3rem
      overflow scroll
      font-size 0.26rem
      color #666
      .tab-item{
        font-size 0.32rem
        color #000
        font-weight 600
      }
      .text{
        font-size 0.28rem
        color #000
        line-height 0.9rem}
    }
  }

  .bottom {
    display: flex;
    flex-direction: row;
    height: 1.21rem;
    width: 100%;
    position: absolute;
    bottom: 0;

    div {
      margin-top: 0.2rem;
      width: 1.01rem;
      text-align: center;
      span {
        font-size: 0.42rem;
      }

      p {
        font-size: 0.18rem;
      }
    }

    .bottom-4 {
      margin-left: 0.4rem;
      width: 50%;
      background: #ff3299;
      border-radius: 0.58667rem 0.58667rem 0.58667rem 0.05333rem;
      color: white;
      text-align: center;
      line-height: 1rem;

      p {
        font-size: 0.3rem;
      }
    }
  }
}

.active{
  background #ff3299
}

.total{
  font-size 0.4rem
  font-weight 700
  color #ee0a24

}
</style>